<template>
  <view class="follow">
    <view v-if="list.length">
      <view class="follow-item" v-for="(item, index) in list" :key="index" @click="jumpDetails(item.productId)" >
        <view class="follow-img">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <view>
          <view class="follow-info">
            <view class="follow-name">{{ item.name }}</view>
          </view>
          <view class="follow-progress">￥{{ item.price }}<text style="color: #8e4c38;margin-left: 10rpx">{{ item.type === 0 ? '线下课' : '线上课' }}</text></view>
          <view style="color: #a7a7a7;font-size: 22rpx">
            {{item.createTime}}
          </view>
        </view>
        <view class="icon" @click.stop="confirmUnfollow(item.productId,index)">
          已关注
        </view>
      </view>
    </view>
    <view v-else style="width: 100%;text-align: center;color: #6B7280;margin-top: 100px">
      暂时还没有关注的课程呢！！！
    </view>
  </view>
</template>

<script>
import {getFollowList, postUnfollow} from "../../../api/new";
import {
  mapGetters
} from "vuex";
export default {
  computed: mapGetters(['isLogin']),
  name: "index",
  data(){
    return{
      list:[],
      propagation:{
        limit:10,
        page:1,
      }
    }
  },
  onReachBottom(){
    if (this.isLogin) {
      this.getList()
    }
  },
  onShow: function () {
    if (this.isLogin) {
      this.getList()
    }
  },
  methods:{
    jumpDetails(id){
      uni.navigateTo({
        url: '/pages/discover/courseDetails/index?id=' + id
      })
    },
    getList(){
      getFollowList(this.propagation).then(res=>{
        if (this.propagation.page === 1) {
          this.list=res.data.list
        } else {
          this.list = [...this.list, ...res.data.list];
        }
        this.propagation.page=res.data.page+1
      })
    },
    unfollow(id,index){
      postUnfollow(id).then(res=>{
        console.log(res)
        uni.showToast({
          title: '取消关注成功！',
          icon: 'success',
        });
        this.$delete(this.list, index);
        console.log(this.list)
        this.$forceUpdate(); // 强制更新视图
      })
    },
    confirmUnfollow(productId, index) {
      uni.showModal({
        title: '确认取消关注',
        content: '确定要取消关注该课程吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.unfollow(productId, index);
          }
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.follow{
  padding: 15px;
  .follow-item {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    padding: 15px;
    position: relative;
    .follow-img {
      width: 120rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      margin-right: 15px;
      overflow: hidden;
      border-radius: 10px;
      image {
        width: 100%; /* 图片宽度撑满容器 */
        height: 100%; /* 图片高度撑满容器 */
        object-fit: cover; /* 图片等比缩放，填满容器，可能裁剪 */
      }
    }

    .follow-info {
      display: flex;
      align-items: center;

      .follow-name {
        font-size: 16px;
        color: #231917;
        margin-bottom: 5px;
      }

    }
    .follow-progress {
      font-size: 14px;
      color: #FF4D4F;
    }
    .icon{
      position: absolute;
      right: 15px;
      background-color: #8B4513;
      border: 1px solid #B16F27;
      border-radius: 20px;
      padding: 6px 10px;
      color: white;
    }
  }
}
</style>